<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm"  status-icon>
        <el-form-item label="违章标题" prop="illegalTitle">
            <el-input v-model="ruleForm.illegalTitle" />
        </el-form-item>
        <el-form-item label="车牌号" prop="illegalBrand">
            <el-input v-model="ruleForm.illegalBrand" />
        </el-form-item>
        <el-form-item label="违章人" prop="illegalName">
            <el-input v-model="ruleForm.illegalName" />
        </el-form-item>
        <el-form-item label="违章日期" prop="illegalTime">
            <el-date-picker v-model="ruleForm.illegalTime" type="date" aria-label="Pick a date"
                placeholder="Pick a date" style="width: 100%"  format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="违章内容" prop="illegalDesc">
            <el-input v-model="ruleForm.illegalDesc" />
        </el-form-item>
        <el-form-item label="处罚结果" prop="illegaloutcome">
            <el-input v-model="ruleForm.illegaloutcome" />
        </el-form-item>
        <el-form-item label="备   注" prop="illegalRemark">
            <el-input v-model="ruleForm.illegalRemark" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                返回
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

const ruleForm = reactive({
     "illegalId":  route.query.id,
    "illegalTitle": "",
    "illegalBrand": "",
    "illegalName": "",
    "illegalTime": "",
    "illegalDesc": "",
    "illegaloutcome": "",
    "illegalRemark": "",
    "firmId": "10086",
    "userId": 1,
    "createName": "张三",
    "createDate": "2024-11-19",
    "updateName": "张三",
    "updateDate": "2024-11-20"
})

const GetIllegalId = () => {
    axios.get("/ReadMaintent/api/Repairs/GetIllegalId?id=" + route.query.id)
        .then(res => {
                ruleForm.illegalId = route.query.id,
                ruleForm.illegalTitle = res.data.data.illegalTitle,
                ruleForm.illegalBrand = res.data.data.illegalBrand,
                ruleForm.illegalName = res.data.data.illegalName,
                ruleForm.illegalTime = res.data.data.illegalTime,
                ruleForm.illegalDesc = res.data.data.illegalDesc,
                ruleForm.illegaloutcome = res.data.data.illegaloutcome,
                ruleForm.illegalRemark = res.data.data.illegalRemark,
                ruleForm.firmId = res.data.data.firmId,
                ruleForm.userId = res.data.data.userId,
                ruleForm.createName = res.data.data.createName,
                ruleForm.createDate = res.data.data.createDate
        })
}



const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    illegalTitle: [
        { required: true, message: '违章标题不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    illegalBrand: [
        { required: true, message: '车牌号不能为空', trigger: 'change', },
    ],
    illegalName: [
        { required: true, message: '违章人不能为空', trigger: 'change', },
    ],
    illegalTime: [
        { required: true, message: '违章日期不能为空', trigger: 'change', },
    ],
    illegalDesc: [
        { required: true, message: '违章描述不能为空', trigger: 'change', },
    ],
    illegaloutcome: [
        { required: true, message: '处罚结果不嫩为给空', trigger: 'change', },
    ],
    illegalRemark: [
        { required: true, message: '备注不能为空', trigger: 'change', },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            router.push({
                name:"IllegalShow",
                
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


onMounted(() => {
    GetIllegalId()
})
</script>